<template>
	<div v-loading="loading">
		<div class="content-top">
			<span class="h1">基础数据</span>
			<span class="h2">词典类型</span>
		</div>
		<div class="contens" style="margin-top: 20px;">
			<div class="left-content" style="margin-bottom: 20px;">
				<div class="clearfix">
					<div class="fl">
						<el-button type="primary" size="small" @click="adddic()">添加词典</el-button>
						<span class="tip" style="margin:0 15px;">词典类型</span>
						<el-radio-group v-model="rate" @change="change()">
							<el-radio :label="1">地类</el-radio>
							<!--<el-radio :label="2">类型2</el-radio>-->
						</el-radio-group>
					</div>
					<div class="fr">
						<el-input v-model="search" placeholder="请输入内容" style="width:217px;"></el-input>
						<el-button type="primary" @click='searchs()'>查询</el-button>
					</div>
				</div>

			</div>
			<el-table :data="dicData" border style="width: 100%">
				<el-table-column prop="ID" label="ID" width="180">
				</el-table-column>
				<el-table-column prop="DictTypeStr" label="词典类型">
				</el-table-column>
				<el-table-column prop="Name" label="名称">
				</el-table-column>
				<el-table-column prop="Dvalue" label="值">
				</el-table-column>
				<el-table-column prop="ValueType" label="值类型">
				</el-table-column>
				<el-table-column prop="StateStr" label="状态">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="small" type="success" @click='modiy(scope.row.ID,scope.row.DictType,scope.row.Name,scope.row.Dvalue,scope.row.ValueType)'>修改</el-button>
						<el-button size="small" type="danger" @click='dels(scope.row.ID)'>删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination small :current-page="pages" @current-change="handleCurrentChange" layout="prev, pager, next" :total="total" background>
				</el-pagination>
			</div>
			<div class="Popup">
			<!--操作弹框-->
			<el-dialog title="词典管理" :visible.sync="dialogVisible" width="400px">
				<div>
					<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
						<el-form-item label="词典类型">
							<el-select v-model="formLabelAlign.value" placeholder="请选择">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="名称">
							<el-input v-model="formLabelAlign.name"></el-input>
						</el-form-item>
						<el-form-item label="值类型">
							<el-input v-model="formLabelAlign.ValueType" type='number'></el-input>
						</el-form-item>
						<el-form-item label="值">
							<el-input v-model="formLabelAlign.Dvalue"></el-input>
						</el-form-item>
					</el-form>
				</div>
				<span slot="footer" class="dialog-footer">
			    <el-button @click="dialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="edit()">确 定</el-button>
			  </span>
			</el-dialog>
			<!--添加词典-->
			<el-dialog title="添加词典" :visible.sync="dialogVisible1" width="400px">
				<div>
					<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
						<el-form-item label="词典类型">
							<el-select v-model="formLabelAlign.value" placeholder="请选择">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="名称">
							<el-input v-model="formLabelAlign.name"></el-input>
						</el-form-item>
						<el-form-item label="值类型">
							<el-input v-model="formLabelAlign.ValueType" type='number'></el-input>
						</el-form-item>
						<el-form-item label="值">
							<el-input v-model="formLabelAlign.Dvalue"></el-input>
						</el-form-item>
					</el-form>
				</div>
				<span slot="footer" class="dialog-footer">
			    <el-button @click="dialogVisible1 = false">取 消</el-button>
			    <el-button type="primary" @click="adddics()">确 定</el-button>
			  </span>
			</el-dialog>

			<!--删除弹框-->
			<el-dialog title="删除词典" :visible.sync="delDic" width="30%">
				<span>确认删除</span>
				<span slot="footer" class="dialog-footer">
			    <el-button @click="delDic = false">取 消</el-button>
			    <el-button type="primary" @click="del()">确 定</el-button>
			  </span>
			</el-dialog>
			</div>
		</div>
	</div>
</template>
<script>
	import api from '../../axios/api'
	export default {
		name: 'dicType',
		data() {
			return {
				loading:false,
				delDic: false, //删除弹框
				dialogVisible1: false, //添加弹框
				search: "", //搜索
				pages: 1, //分页页码
				total: 1, //条数
				options: [{
					value: '1',
					label: '地类'
				}], //词典类型
				formLabelAlign: {
					name: '',
					ValueType: '', //值类型
					Dvalue: '', //值
					value: '1', //选择的值
				}, //词典弹框字段
				labelPosition: 'left', //对其方式
				dialogVisible: false,
				dicData: [], //词典列表
				rate: 1, //词典类型
				id: '', //接收公共id
			}
		},
		created() {
			this.dictget(this.search, this.pages)
		},
		methods: {
			//分页
			handleCurrentChange(val) {
				this.dictget(this.search, val)
			},
			//获取词典列表
			dictget(val, index) {
				this.loading = true
				this.$post(api.dictget, {
						"Para": {
							"QueryKeyWord": val,
							"DictType": 1
						},
						"PageSize": 10,
						"PageIndex": index - 1,
						"OrderString": "",
						"ToExcel": false
					})
					.then((response) => {
						if(response.isOK == true && response.state == 200) {
							this.loading = false
							this.dicData = response.Data.Data
							this.total = response.Data.Items ? response.Data.Items : 1
						}else{
							this.loading = false
							this.$message.error(response.msg);
						}
					}).catch((err)=>{
						this.loading = false
				      	this.$message.error('服务器内部错误');
					})
			},
			//修改弹框
			modiy(id,DictType,Name,Dvalue,ValueType) {
				this.id = id
				this.formLabelAlign.value = DictType.toString()
				this.formLabelAlign.name = Name
				this.formLabelAlign.Dvalue = Dvalue
				this.formLabelAlign.ValueType = ValueType
				this.dialogVisible = true
			},
			//确认修改
			edit() {
				if(this.formLabelAlign.name==''||this.formLabelAlign.Dvalue ==''||this.formLabelAlign.ValueType==''){
					this.$message({
						message: '参数不能为空',
						type: 'warning'
					});
					return
				}
				this.loading = true
				this.$post(api.dictUpdate, {
					"ID": this.id,
					"DictType": this.formLabelAlign.value,
					"Name": this.formLabelAlign.name,
					"Dvalue": this.formLabelAlign.Dvalue,
					"ValueType": this.formLabelAlign.ValueType
				})
				.then((response) => {
					if(response.isOK == true && response.state == 200) {
						this.loading = false
						this.search = ''
						this.pages = 1
						this.dictget(this.search, this.pages)
						this.dialogVisible = false
						this.$message({
							message: '修改成功',
							type: 'success'
						});
					}else{
						this.loading = false
						this.$message.error(response.msg);
					}
				}).catch((err)=>{
					this.loading = false
			      	this.$message.error('服务器内部错误');
				})
			},
			change() {

			},
			//添加词典弹框
			adddic() {
				this.formLabelAlign.name = ''
				this.formLabelAlign.Dvalue = ''
				this.formLabelAlign.ValueType = ''
				this.dialogVisible1 = true
			},
			//确认添加词典
			adddics() {
				
				if(this.formLabelAlign.name == '' || this.formLabelAlign.Dvalue == '' || this.formLabelAlign.ValueType == '') {
					this.$message({
						message: '参数不能为空',
						type: 'warning'
					});
					return
				}
				this.loading = true
				this.$post(api.dictAdd, {
					"DictType": this.formLabelAlign.value,
					"Name": this.formLabelAlign.name,
					"Dvalue": this.formLabelAlign.Dvalue,
					"ValueType": this.formLabelAlign.ValueType
				})
				.then((response) => {
					if(response.isOK == true && response.state == 200) {
						this.loading = false
						this.search = ''
						this.pages = 1
						this.dictget(this.search, this.pages)
						this.dialogVisible1 = false
						this.$message({
							message: '添加成功',
							type: 'success'
						});
					}else{
						this.loading = false
						this.$message.error(response.msg);
					}
				}).catch((err)=>{
					this.loading = false
			      	this.$message.error('服务器内部错误');
				})
			},
			//删除词典
			dels(id) {
				this.$confirm('将永久删除该词典, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.loading = true
					this.$get(api.dictDel + '/' + id)
						.then((response) => {
							if(response.data.isOK == true && response.data.state == 200) {
								this.loading = false
								this.delDic = false
								this.search = ''
								this.pages = 1
								this.dictget(this.search, this.pages)
								this.$message({
									message: '删除成功',
									type: 'success'
								});
							}else{
								this.loading = false
								this.$message.error(response.data.msg);
							}
						}).catch((err)=>{
							this.loading = false
					      	this.$message.error('服务器内部错误');
						})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//查询
			searchs(){
				this.pages = 1
				this.dictget(this.search, this.pages)
			}
		}
	}
</script>

<style scoped>
.Popup .el-select{
	width: 100%!important;
}
</style>